<template>
    <div>
        <h2>我是"App"的子组件，我的根组件Vue#app20190124</h2>
        <child-one ref="one"/>
        <child-two ref="two"/>
        <h2 ref="three">three</h2>
    </div>
</template>

<script>
export default {
  name: 'getComponentsVal',
  data () {
    return {
      msg: 'getComponentsVal'
    }
  },
  components: {
    childOne: {
      name: 'child-one',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-one'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    },
    childTwo: {
      name: 'child-two',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-two'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    }
  },
  mounted () {
    console.group('根组件、父组件-------------')
    console.log(this.$root) // 根实例对象： {Vue#app}
    console.log(this.$root.msg) // #app
    console.log(this.$parent) // 父组件实例对象： {Vue父}
    console.log(this.$parent.msg) // App
    console.groupEnd()
    console.group('子组件--------------------')
    console.log(this.$children) // 所有子级数组： [VueComponent, VueComponent]
    console.log(this.$children[0].msg) // 获取第一个子级msg： child-one
    console.log(this.$children[1].msg) // 获取第二个子级msg： child-two
    console.groupEnd()
    console.group('$refs--------------------')
    console.log(this.$refs) // 包含所有refs的对象：{one: VueComponent, two: VueComponent, three: h2}
    console.log(this.$refs.one) // 子级组件： child-one
    console.log(this.$refs.two) // 子级组件： child-two
    console.log(this.$refs.three) // dom元素： <h2>three</h2>
    console.groupEnd()
  }
}
</script>
